<template>

  <div>
    <div class="recharge-hd">账号预览</div>
    <div class="indent">
      <el-card class="box-card">
        <div slot="header" class="">
          <span style="color: #828282">账号详情</span>
        </div>
        <div class="item"><span>账号昵称：</span>{{myInfo.nickName}}</div>
        <div class="item" v-if="myInfo.mobile">
            <span>手机号：</span>{{myInfo.mobile}}
            <i class="icon" style="font-size: 14px; padding: 2px 10px;" @click='dialogTableVisiblePhone=true'>解绑手机</i>
          </div>
        <div class="item"><span>易宝：</span>
          <b style="color:#d1483f;font-size: 18px; margin-right: 5px;vertical-align: middle;">￥{{myInfo.transactionPrice}}</b>
          <i class="icon" style="font-size: 14px; padding: 2px 10px;" @click='bankCard'>提现</i>
        </div>
        <!-- <div class="el-icon-warning" style="color: #e6a23c;">提现无笔数限制  单笔提现服务费1元/笔</div> -->
        <div class="item"><span>是否实名：</span>
          <i class="icon" @click="bindLookOrder">{{myInfo.isReal==1?'已实名':'未实名'}}</i>
        </div>

      </el-card>

    </div>
    <div class="indent" v-if="myInfo.isReal==1 && realprovesName.bankAccount || realprovesName.aliName">
      <el-card class="box-card">
        <div slot="header" class="">
          <span style="color: #828282">实名信息</span>
        </div>
        <div class="item"><span>姓名：</span>{{realprovesName.userName}}</div>
        <div class="item" v-if="realprovesName.bankAccount"><span>银行：</span>{{bankName(realprovesName.bankCode)}}</div>
        <div class="item" v-if="realprovesName.bankAccount"><span>银行卡号：</span>{{realprovesName.bankAccount}}</div>
        <div class="item" v-if="realprovesName.bankAccount"><span>开户支行：</span>{{realprovesName.bankProvince +' '+realprovesName.bankCity +' '+realprovesName.bankSubname}}</div>
        <div class="item" v-if=" realprovesName.aliName"><span>支付宝：</span>{{ realprovesName.aliName}}</div>

      </el-card>
    </div>
    <!-----------------提现窗口-------------------------->
    <el-dialog width="650px" center title="提现" :close-on-click-modal="false" :visible.sync="dialogTableVisible">
      <div style="display: flex;    justify-content: space-between;">
        <div :class="isAliOrBank=='ali'?'bankCard atv':'bankCard'" v-if="realprovesName.aliName" @click="bingIsAliOrBank('ali')">
          <div class="select"></div>
          <div class="bankCardInfo">
            <p>支付宝账号</p>
            <p>{{realprovesName.userName}}</p>
            <p>{{ realprovesName.aliName }}</p>
          </div>
        </div>
        <div :class="isAliOrBank=='bank'?'bankCard atv':'bankCard'" v-if="realprovesName.bankAccount" @click="bingIsAliOrBank('bank')">
          <div class="select"></div>
          <div class="bankCardInfo">
            <p>{{bankName(realprovesName.bankCode)}}</p>
            <p>{{realprovesName.userName}}</p>
            <p>{{ realprovesName.bankAccount }}</p>
          </div>
        </div>

      </div>
      <el-form label-width="100px" label-position="left" ref="ruleForm" :model="ruleForm" :rules="rules">
        <el-form-item label="手机号码" prop="mobile">
          <el-input readonly :value="myInfo.mobile"></el-input>
        </el-form-item>
        <el-form-item label="手机验证" prop="code">
          <el-input style="width:64%" v-model="ruleForm.code" placeholder='请输入手机验证码' />
          <div class="codephone" @click="getLoginCode" v-if='isCodeShow'>{{codespan}}</div>
          <div class="codephone del" v-if='!isCodeShow'>{{codespan}}</div>
        </el-form-item>
        <el-form-item prop="pirce" label="提现金额">
          <el-input @input="ruleForm.pirce=Number(ruleForm.pirce.replace(/[^\d]/g,''))" v-model="ruleForm.pirce" placeholder="请输入提现金额"></el-input>
        </el-form-item>
        <el-form-item prop="bankPass" label="提现密码">
          <el-input v-model="ruleForm.bankPass" show-password placeholder="请输入提现密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button :disabled="loading" @click="withdraw" type="danger">确认提现</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog width="550px" center title="解绑手机号" :close-on-click-modal="false" :visible.sync="dialogTableVisiblePhone">
      <el-form label-width="100px" label-position="left" ref="ruleFormPhone" :model="ruleFormPhone" :rules="rulesPhone">
        <el-form-item label="手机号码" prop="mobile">
          <el-input readonly :value="myInfo.mobile"></el-input>
        </el-form-item>
        <el-form-item label="手机验证" prop="code">
          <el-input style="width:64%" v-model="ruleFormPhone.code" placeholder='请输入手机验证码' />
          <div class="codephone" @click="getLoginUnCode" v-if='isCodeShow'>{{codespan}}</div>
          <div class="codephone del" v-if='!isCodeShow'>{{codespan}}</div>
        </el-form-item>
        <el-form-item>
          <el-button :disabled="loading" @click="unbindPhone" type="danger">确定解绑</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'mySurvey',
  props: ['myInfo'],
  data () {
    return {
      dialogTableVisiblePhone:false,
      isAliOrBank: '',
      realprovesName: '',
      loading: false,
      dialogTableVisible: false,
      isCodeShow: true,
      codespan: '获取验证码',
      bankListL: [
        { id: 1, name: '工商银行' },
        { id: 3, name: '农业银行' },
        { id: 2, name: '建设银行' },
        { id: 5, name: '中国银行' },
        { id: 7, name: '招商银行' },
        { id: 33, name: '北京银行' },
        { id: 6, name: '交通银行' },
        { id: 13, name: '兴业银行' },
        { id: 65, name: '南京银行' },
        { id: 14, name: '民生银行' },
        { id: 8, name: '光大银行' },
        { id: 18, name: '平安银行' },
        { id: 67, name: '渤海银行' },
        { id: 66, name: '东亚银行' },
        { id: 17, name: '宁波银行' },
        { id: 12, name: '中信银行' },
        { id: 11, name: '广发银行' },
        { id: 16, name: '上海银行' },
        { id: 9, name: '上海浦东发展银行' },
        { id: 4, name: '中国邮政' },
        { id: 10, name: '华夏银行' },
        { id: 68, name: '北京农村商业银行' }
      ],
      rules: {
        pirce: [
          {
            required: true,
            message: '请输入提现金额'
          },
          {
            validator: function (rule, value, callback) {
              if (value < 10) {
                callback(new Error('提现金额不能小于10元'))
              } else {
                callback()
              }
            }
          }
        ],
        mobile: [
          {
            required: true,
            message: '请输入手机号'
          },
          {
            validator: function (rule, value, callback) {
              var reg = /^1[3|4|5|6|7|8|9]\d{9}$/
              if (!reg.test(value)) {
                callback(new Error('手机号码格式不正确'))
              } else {
                callback()
              }
            }
          }
        ],
        code: [
          {
            required: true,
            message: '请输入手机验证码'
          },
          {
            minLength: 4,
            message: '密码长度最少 4 个字符'
          }
        ],
        bankPass: [
          {
            required: true,
            message: '请输入提现密码'
          }
          // {
          //   validator: function (rule, value, callback) {
          //     var reg = /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]|[\s]/g
          //     if (reg.test(value)) {
          //       callback(new Error('提现密码不能包含汉字和空格'))
          //     } else {
          //       callback()
          //     }
          //   }
          // }
        ]
      },

      ruleForm: {
        bankPass: '',
        pirce: '',
        mobile: this.myInfo.mobile,
        code: ''
      },
      ruleFormPhone: {
        mobile: this.myInfo.mobile,
        code: ''
      },
      rulesPhone: {
        mobile: [
          {
            required: true,
            message: '请输入手机号'
          },
          {
            validator: function (rule, value, callback) {
              var reg = /^1[3|4|5|6|7|8|9]\d{9}$/
              if (!reg.test(value)) {
                callback(new Error('手机号码格式不正确'))
              } else {
                callback()
              }
            }
          }
        ],
        code: [
          {
            required: true,
            message: '请输入手机验证码'
          },
          {
            minLength: 4,
            message: '密码长度最少 4 个字符'
          }
        ],
        
      },
    }
  },
  computed: {},

  mounted () {
    if (this.myInfo.isReal == 1) {
      this.realproves()
    }
  },
  methods: {
    bingIsAliOrBank (e) {
      this.isAliOrBank = e
    },
    realproves () {
      // 获取实名信息详情

      this.$apis.realproves().then(res => {
        this.realprovesName = res.data.data
        if (this.realprovesName.aliName && this.realprovesName.aliName != '') {
          this.isAliOrBank = 'ali'
          return
        }
        if (
          this.realprovesName.bankAccount &&
          this.realprovesName.bankAccount != ''
        ) {
          this.isAliOrBank = 'bank'
        }
      })
    },
    bankName (e) {
      for (var i = 0; i < this.bankListL.length; i++) {
        if (e == this.bankListL[i].id) {
          return this.bankListL[i].name
        }
      }
    },
    bankCard () {
      if (this.myInfo.isReal != 1) {
        this.$confirm('请先实名后再操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$emit('setIndex', 4)
          })
          .catch(() => {})
        return
      }
      if (!this.realprovesName.bankAccount && !this.realprovesName.aliName) {
        this.$confirm('请先绑定银行卡或支付宝, 是否添加?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$emit('setIndex', 5)
          })
          .catch(() => {})
      } else {
        this.dialogTableVisible = true
      }
    },
    bindLookOrder () {
      this.$emit('setIndex', 4)
    },
    getLoginUnCode () {
      // 获取登录验证码

      this.$refs.ruleFormPhone.validateField(['mobile'], valid => {
        if (!valid) {
          clearInterval(this.time)
          let numberTime = 60
          this.isCodeShow = false
          this.time = setInterval(() => {
            numberTime--
            if (numberTime <= 0) {
              numberTime = 60
              clearInterval(this.time)
              this.codespan = '获取验证码'
              this.isCodeShow = true
              return
            }
            this.codespan = numberTime + '秒后获取'
          }, 1000)

          this.$apis
            .currencyCaptcha({
              mobile: this.ruleForm.mobile
            })
            .then(res => {
              if (res.data.errno == 0) {
                this.$message.success('获取验证码成功')
              } else {
                this.$message.error(res.data.errmsg)
              }
            })
        }
      })
    },
    getLoginCode () {
      // 获取登录验证码

      this.$refs.ruleForm.validateField(['mobile'], valid => {
        if (!valid) {
          clearInterval(this.time)
          let numberTime = 60
          this.isCodeShow = false
          this.time = setInterval(() => {
            numberTime--
            if (numberTime <= 0) {
              numberTime = 60
              clearInterval(this.time)
              this.codespan = '获取验证码'
              this.isCodeShow = true
              return
            }
            this.codespan = numberTime + '秒后获取'
          }, 1000)

          this.$apis
            .currencyCaptcha({
              mobile: this.ruleForm.mobile
            })
            .then(res => {
              if (res.data.errno == 0) {
                this.$message.success('获取验证码成功')
              } else {
                this.$message.error(res.data.errmsg)
              }
            })
        }
      })
    },
    unbindPhone() { 
      this.$refs.ruleFormPhone.validate(async valid => {
        if (valid) {
          this.loading = true
          var data = await this.$apis
            .currencyCheckCaptcha(this.ruleFormPhone)
            .then(res => {
              return res
            })
          if (data.data.errno == 0) {
        
              this.$apis.unbindingPhone(this.ruleFormPhone).then(res => {
                if (res.data.errno == 0) {
                  this.$notify.success({
                    title: '成功',
                    message: '解绑成功'
                  })
                  this.dialogTableVisiblePhone = false
                  this.logout();
                } else {
                  this.$notify.error({
                    title: '错误',
                    message: res.data.errmsg
                  })
                }
                this.loading = false
              })
           
          } else {
            this.$message({
              message: data.data.errmsg,
              type: 'error'
            })
            this.loading = false
          }
        }
      })
    },
    withdraw () {
      if (this.isAliOrBank != 'bank' && this.isAliOrBank != 'ali') {
        this.$message.error('请选择打款方式')
        return
      }
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          this.loading = true
          var data = await this.$apis
            .currencyCheckCaptcha({
              mobile: this.ruleForm.mobile,
              code: this.ruleForm.code
            })
            .then(res => {
              return res
            })
          if (data.data.errno == 0) {
            if (this.isAliOrBank == 'bank') {
              this.$apis.moneyApply(this.ruleForm).then(res => {
                if (res.data.errno == 0) {
                  this.$notify.success({
                    title: '成功',
                    message: '银行卡提现申请成功'
                  })
                  this.dialogTableVisible = false
                  this.$parent.getInfo()
                } else {
                  this.$notify.error({
                    title: '错误',
                    message: res.data.errmsg
                  })
                }
                this.loading = false
              })
              return
            }
            if (this.isAliOrBank == 'ali') {
              this.$apis.moneyApplyAli(this.ruleForm).then(res => {
                if (res.data.errno == 0) {
                  this.$notify.success({
                    title: '成功',
                    message: '支付宝提现申请成功'
                  })
                  this.dialogTableVisible = false
                  this.$parent.getInfo()
                } else {
                  this.$notify.error({
                    title: '错误',
                    message: res.data.errmsg
                  })
                }
                this.loading = false
              })
            }
          } else {
            this.$message({
              message: data.data.errmsg,
              type: 'error'
            })
            this.loading = false
          }
        } else {
          return false
        }
      })
    },
    logout () {
      // 退出
      this.$apis.logout().then(res => {
        if (res.data.errno == 0) {
        }
        localStorage.removeItem('storage_key')
        localStorage.removeItem('token')
        this.$store.commit('setUserInfo', '')
        location.reload()
        //this.$router.replace({ path: './' })
      })
    },
  }
}
</script>

<style lang="less" scoped>
.icon {
  font-style: normal;
  color: #986e32;
  font-size: 12px;
  background: #ffe863;
  border: 1px #986e32 dashed;
  padding: 2px 3px;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
}
.indent {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.box-card {
  width: 100%;
}
.item {
  margin-bottom: 10px;
  span {
    display: inline-block;
    width: 80px;
    color: #828282;
  }
}
.recharge-hd {
  border-left: 3px solid #d82141;
  padding: 2px 10px;
  margin-bottom: 30px;
}
.bankCard.atv {
  border: 1px #d82141 solid;
  .select {
    position: absolute;
    background: url("./../../../assets/static/t-19.png") no-repeat;
    top: 0px;
    right: 0px;
    width: 40px;
    height: 40px;
  }
}
.bankCard {
  position: relative;
  width: 290px;
  height: 150px;
  border: 1px #ddd dotted;
  cursor: pointer;
  text-align: center;
  margin-bottom: 20px;
  overflow: hidden;

  .bankbind {
    margin-top: 75px;
    color: #a3a3a3;
  }
  .bankCardInfo {
    padding-top: 20px;
    line-height: 35px;
    font-size: 16px;
    color: #8d8d8d;
  }
  .bankUp {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #8b8b8b94;
  }
}
</style>